links_original_opacity = 0.8;
var carNodeClicked = false;
function selectLinkByCcNum(cc_num) {
	// 找到与对应信用卡相关的link
	if (cc_num == '1') {
		var link_cc = d3.selectAll(".link");
		link_cc.style("opacity", links_original_opacity);
	}
	else {
		var link_cc = d3.selectAll(".link")
			.filter(function (d) {
				return d.source.name === cc_num;
			});

		// 降低所有link透明度
		d3.selectAll(".link")
			.style("opacity", 0.2);

		// 凸显选中的link
		link_cc.style("opacity", links_original_opacity);
	}
}
document.addEventListener('DOMContentLoaded', function () {
	var margin = { top: 10, right: 20, bottom: 10, left: 10 },
		width = 260 - margin.left - margin.right,
		height = 2500 - margin.top - margin.bottom;

	// 格式化变量
	var formatNumber = d3.format(",.0f"), // 小数点后零位
		format = function (d) { return formatNumber(d); },
		color = d3.scaleOrdinal(d3.schemeSet2);

	var svg = d3.select("#shankey_svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
		.append("g")
		.attr("transform",
			"translate(" + margin.left + "," + margin.top + ")");

	// 设置桑基图属性
	var sankey = d3.sankey()
		.nodeWidth(12)
		.nodePadding(8)
		.size([width + 20, height])
		.nodeAlign(d3.sankeyRight);

	var path = sankey.links();

	// 加载数据
	d3.csv("./data/sankey_chart_data(car_cc_loyalty_frequency).csv").then(function (data) {

		// 设置空图形
		sankeydata = { "nodes": [], "links": [] };

		// 输入数据到sankey中
		data.forEach(function (d) {
			sankeydata.nodes.push({ "name": d.cc_num });
			sankeydata.nodes.push({ "name": d.loyalty_num });
			sankeydata.links.push({
				"source": d.cc_num,
				"target": d.loyalty_num,
				"value": d.frequency
			});
		});

		// 仅返回不同的节点
		sankeydata.nodes = Array.from(
			d3.group(sankeydata.nodes, d => d.name),
			([value]) => (value)
		); console.log(sankeydata.nodes)

		// 循环浏览每个link，将文本替换为节点中的索引
		sankeydata.links.forEach(function (d, i) {
			sankeydata.links[i].source = sankeydata.nodes
				.indexOf(sankeydata.links[i].source);
			sankeydata.links[i].target = sankeydata.nodes
				.indexOf(sankeydata.links[i].target);
		});

		// 循环遍历每个节点，使节点成为对象数组，而不是字符串数组
		sankeydata.nodes.forEach(function (d, i) {
			sankeydata.nodes[i] = { "name": d };
		});

		graph = sankey(sankeydata);
		console.log(graph)
		// 添加link
		var link = svg.append("g").selectAll(".link")
			.data(graph.links)
			.enter().append("path")
			.attr("class", "link")
			.attr("d", d3.sankeyLinkHorizontal())
			.attr("stroke-width", function (d) { return d.width; })
			.style("opacity", links_original_opacity);

		// 添加link标题
		link.append("title")
			.text(function (d) {
				return d.source.name + "信用卡 对应的是 忠诚卡" +
					d.target.name + "\n" + "映射次数： " + format(d.value) + "次";
			});


		// 添加节点
		var node = svg.append("g").selectAll(".node")
			.data(graph.nodes)
			.enter().append("g")
			.attr("class", "node")

		// 代表节点的长方形
		node.append("rect")
			.attr("x", function (d) { return d.x0; })
			.attr("y", function (d) { return d.y0; })
			.attr("height", function (d) { return d.y1 - d.y0; })
			.attr("width", sankey.nodeWidth())
			.attr("nodeId", function (d) { return d.name; })
			.style("fill", function (d) {
				return "#8F4B28";
			})
			.attr('stroke-width', 0)
			.append("title")
			.text(function (d) {
				if (d.name.length < 4) {
					return "车辆ID: " + d.name;
				}
				else if (d.name.length == 4) {
					return "信用卡号: " + d.name;
				}
				else {
					return "忠诚卡号: " + d.name;
				}
			})

		node.on("mouseover", function (d) {
			// console.log(d);
			var id = d.target.getAttribute("nodeId");
			link.style("opacity", 0.9);
			d3.selectAll('.link').data(graph.links).style("opacity", function (d) {
				if (d.source.name == (id) || d.target.name == (id)) {
					return links_original_opacity + 0.1;
				}
				return 0.1;
			})
		})
			.on("mouseleave", function (d) {
				link.style("opacity", links_original_opacity);
			});

		link.style("stroke", function (d) {
			return color(d.source.index);
		});

		// 为节点添加标题
		node.append("text")
			.attr("x", function (d) { return d.x0 - 6; })
			.attr("y", function (d) { return (d.y1 + d.y0) / 2; })
			.attr("dy", "0.35em")
			.attr("text-anchor", "end")
			.text(function (d) { return d.name; })
			.filter(function (d) { return d.x0 < width / 2; })
			.attr("x", function (d) { return d.x1 + 6; })
			.attr("text-anchor", "start");


		node.on("click", function (d) {
			var nodeSelected = d3.select(d.target);
			var nodeName = d.srcElement.__data__.name;
			if (nodeSelected.style("stroke") === "none") {
				nodeSelected.style("stroke", "#40E0D0").style("stroke-width", "0px");
				if (nodeName.length > 4 || nodeName.length <= 2) {
				}
				else {
					// console.log(nodeName)
					var cc_dropdown = d3.select("#dropdowncc")
					cc_dropdown.property('value', nodeName);
					cc_dropdown = document.querySelector("#dropdowncc");
					cc_dropdown.dispatchEvent(new Event('change'));
				}
			}
			else {
			}
		});
	});
});